<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div style="width:100%;">
			<div class="list">
				<p class="panel_title">区域列表</p>
				<el-tree :show-overflow-tooltip="true" style="height: 450px;overflow: auto;border: 0" ref="tree" :data="districtsDatas" :props="defaultProps" node-key="DistrictKeyId" :current-node-key="currentNodeKey" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" @node-click="handleNodeClick">
				</el-tree>
			</div>
			<div style="width:85%;float:right">
				<headerOpreate style="width:500px;padding-bottom: 5px;float: left;" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
				<div class="block" style="text-align: right;float: right;padding-bottom: 2px">
					<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
					</el-pagination>
				</div>
				<el-table border style="width: 100%" @selection-change="handleSelectionChange" :data="tableData">
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="devicename"></el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="检测时间" align="center" prop="time"></el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="检测设备类型" align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.detecttype == 'Projector'">投影仪</span>
							<span v-if="scope.row.detecttype == 'Curtain'">幕布</span>
							<span v-if="scope.row.detecttype == 'Sound'">音响</span>
						</template>
					</el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="检测结果" align="center">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.result == 0" type="success">正常</el-tag>
							<el-tag v-if="scope.row.result == 1" type="danger">异常</el-tag>
							<el-tag v-if="scope.row.result == 2" type="warning">标定文件不存在</el-tag>
							<el-tag v-if="scope.row.result == 3" type="warning">摄像头出错</el-tag>
							<el-tag v-if="scope.row.result == 4" type="warning">投影机未添加</el-tag>
							<el-tag v-if="scope.row.result == 5" type="warning">音量传感器未添加</el-tag>
						</template>
					</el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="执行操作" align="center">
						<template slot-scope="scope">
							<el-button type="primary" size="small" @click="showDetail(scope.row)">
								<li class="el-icon-information el-icon--left"></li>详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px">
					<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
					</el-pagination>
				</div>
			</div>

			<el-dialog title="启动外设自检" v-model="autoDetectDialog" :show-close="false" :class="[dialog-small-width]" v-loading="dialogLoading">
				<div>
					<el-form label-position="left" ref="autoDetectForm" :model="autoDetectForm" label-width="80px">
						<el-form-item label="执行操作">
							<el-select v-model="autoDetectForm.operation" style="width:100%;">
								<el-option label="执行所有外设的自检" :value="0"></el-option>
								<el-option label="投影幕布升降自检" :value="1"></el-option>
								<el-option label="投影机亮度自检" :value="2"></el-option>
								<el-option label="音量自检" :value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div class="tree_list">
						<p class="panel_title">{{$t('message.deviceList')}}<span>【注：离线设备无法选中】</span></p>
						<!-- <el-tree :show-overflow-tooltip="true" style="height: 200px;overflow: auto" :data="datas" ref="tree" :highlight-current="true" show-checkbox :props="props" :default-expand-all="true" node-key="sn"></el-tree> -->
						<el-tag v-if="datas.length == 0" style="width: 100%;margin-top: 10px;text-align: center">暂无数据</el-tag>
						<el-checkbox-group v-model="checkSns" style="margin-top: 10px">
							<el-checkbox v-for="item in datas" :label="item.sn" :disabled="!item.online" style="width: 100%;padding-top: 8px">{{item.name}}</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="autoDetectDialog = false">取 消</el-button>
					<el-button type="primary" @click="confirmAutoDetect">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import noImg from '../../../../assets/images/no_img.jpg'
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				loading: false,
				checkSns: [],
				currentNodeKey: null,
				districtsDatas: [],
				defaultExpandedKeys: [],
				defaultProps: {
					children: 'Children',
					label: 'Name',
					id: 'Id'
				},
				districtForm: {
					districtid: ''
				},
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				autoDetectDialog: false,
				dialogLoading: false,
				datas: [],
				// props: {
				// 	label: 'name',
				// 	id: 'sn'
				// },
				autoDetectForm: {
					operation: 0
				},
				opreateDatas: [{
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				},
				{
					size: "small",
					type: "primary",
					icon: "el-icon-upload el-icon--left",
					name: "启动外设自检",
					action: "autoDetect"
				},
				{
					size: "small",
					type: "primary",
					icon: "el-icon-upload el-icon--left",
					name: "配置文件推送",
					action: "filePushed"
				},
				{
					size: "small",
					type: "primary",
					icon: "el-icon-eleg-icon_documents_alt el-icon--left",
					name: "计划任务",
					action: "goScheduleTask"
				},
				{
					type: "danger",
					size: "small",
					icon: "el-icon-delete2 el-icon--left",
					name: "删除",
					action: "multipleDelete"
				}
				]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
				//前往文件推送页面
				filePushed() {
					var row = {};
					// row.currentPage = this.currentPage;
					// row.pageSize = this.pageSize;
					// row.districtId = this.districtForm.districtid;
					this.$emit('changeView','FilePushed', row);
				},
				//前往计划任务页面
				goScheduleTask() {
					var row = {};
					// row.currentPage = this.currentPage;
					// row.pageSize = this.pageSize;
					// row.districtId = this.districtForm.districtid;
					this.$emit('changeView', 'ScheduleTask', row);
				},
				//前往详情页
				showDetail(row) {
					row.currentPage = this.currentPage;
					row.pageSize = this.pageSize;
					row.districtId = this.districtForm.districtid;
					this.$emit('changeView', 'Detail', row);
				},
				autoDetect() {
					this.getAllDeviceInfo();
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				formateSelection() {
					var result = [],
					array = this.multipleSelection;
					array.forEach(function(item) {
						result.push(item.keyid);
					})
					return result;
				},
				multipleDelete() {
					if(this.formateSelection().length > 0) {
						this.$confirm(this.$t('message.bulkDeleteWarning'), this.$t('message.warning'), {
							confirmButtonText: this.$t('message.yes'),
							cancelButtonText: this.$t('message.no'),
							type: 'warning'
						}).then(() => {
							//批量删除成功处理
							var param = {
								keyids: this.formateSelection(),
								UserId: parseInt(GloabFun.getKeyId())
							}
							this.loading = true;
							console.log(param)
							HttpServer.httpPost.call(this, '/Api/NCC/Delete/DetectResult', param, function(response) {}, function(response) {
								this.loading = false;
								if(response.data.code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.bulkDeleteSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
								this.getDatas();
							});
						}).catch(() => {
						//取消批量删除处理
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					});
					} else {
						this.$notify({
							title: this.$t('message.warning'),
							message: this.$t('message.selectBulkDeleteWarning'),
							type: 'warning',
							duration: 2500
						});
					}
				},
				//获取所有中控设备
				getAllDeviceInfo() {
					HttpServer.httpPost.call(this, '/Api/Device/Info', {category: ['MultimediaIT']}, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.datas = response.data.deviceinfo;
							this.autoDetectDialog = true
						}else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				},
				confirmAutoDetect() {
					if(this.checkSns.length === 0){
						this.$notify.warning({
							title: '提示',
							message: this.$t('message.chooseTheDevice'),
							duration: 2500
						});
					}else {
						this.$confirm('此操作将对所选设备进行指定操作，是否继续？', this.$t('message.warning'), {
							confirmButtonText: this.$t('message.yes'),
							cancelButtonText: this.$t('message.no'),
							type: 'warning'
						}).then(() => {
							var param = {
								sns: this.checkSns,
								operation: this.autoDetectForm.operation,
								UserId: parseInt(GloabFun.getKeyId())
							}
							this.dialogLoading = true;
							HttpServer.httpPost.call(this, '/Api/Peripheral/AutoDetect', param, function(response) {}, function(response) {
								this.dialogLoading = false;
								if(response.data.code === 0){
									if(response.data.response.length === 0){
										this.$notify.error({
											title: '错误',
											message: '操作无响应',
											duration: 2500
										});
									}else{
										this.$emit('changeView','DetectResult', {cmdid: response.data.cmdid});
									}
								}else{
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							});
						}).catch(() => {
						//取消批量删除处理
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					});
					}
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.getDatas();
				},
				handleCurrentChange(val) {
					this.currentPage = val;
					this.getDatas();
				},
				handleNodeClick(data) {
					this.districtForm.districtid = data.DistrictKeyId;
					this.currentNodeKey = data.DistrictKeyId;
					this.getDatas();
				},
				reloadDatas() {
					this.isReload = true;
					this.getDatas();
				},
				//获取自检结果列表
				getDatas() {
					this.loading = true;
					HttpServer.httpPost.call(this,'/Api/NCC/AutoDetectResult',{districtids: [this.districtForm.districtid],sns: [], index: this.currentPage, pagesize: this.pageSize, filter: '', UserId: parseInt(GloabFun.getKeyId())}, function(response){}, function(response){
						this.loading = false;
						if(response.data.code === 0){
							response.data.info.forEach(function(item){
								if(item.savefile == ''){
									item.savefile = noImg;
								}
							})
							this.tableData = response.data.info;
							this.totalSize = response.data.total;
							if(this.isReload){
								this.$notify({
									title: '成功',
									message: this.$t('message.refreshSuccess'),
									type: 'success',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						this.isReload = false;
					})
				},
				//按照orderId大小排序
				sortDatas(arr) {
					for(var i=0;i<arr.length;i++){
						for(var j = i + 1;j<arr.length;j++){
							if(arr[i].DistrictKeyId>arr[j].DistrictKeyId){
								var tmp = arr[i];
								arr[i] = arr[j];
								arr[j] = tmp;
							}
						}
					}
					return arr;
				},
				//查询所有区域
				getDistrictDatas() {
					HttpServer.httpGet.call(this, '/Api/District/districtTree?uid=' + parseInt(GloabFun.getKeyId()), function(response) {}, function(response) {
						// console.log('获取当前用户的所有绑定区域信息',response)
						if(response.data.code === 0) {
							if(response.data.info.length > 0) {
								this.districtsDatas = this.sortDatas(response.data.info);
								this.defaultExpandedKeys.push(this.districtsDatas[0].DistrictKeyId);
								if(this.templateObj.sn && this.templateObj.sn != '') {
									this.currentNodeKey = this.templateObj.districtId;
									this.districtForm.districtid = this.templateObj.districtId;
								}else {
									this.currentNodeKey = this.districtsDatas[0].DistrictKeyId;
									this.districtForm.districtid = this.districtsDatas[0].DistrictKeyId;
								}
								// this.currentNodeKey = this.districtsDatas[0].DistrictKeyId;
								// this.districtForm.districtid = this.districtsDatas[0].DistrictKeyId;
							}
							this.getDatas();
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}
			},
			created() {
				if(this.templateObj.sn && this.templateObj.sn != '') {
					this.currentPage = this.templateObj.currentPage;
					this.pageSize = this.templateObj.pageSize;
				}
				this.getDistrictDatas();
			}
		}
	</script>
	<style scoped lang="less">
		.name {
			color: #20a0ff;
		}

		.list {
			height: 500px;
			// max-height:580px;
			width: 14%;
			float: left;
			overflow: auto;
			// padding-top: 10px;
			// background-color: #324157;
			margin-bottom: 10px;
			.panel_title {
				height: 28px;
				line-height: 28px;
				font-size: 15px;
				text-align: center;
				border: 1px solid #E0E0E0;
				border-radius: 5px;
				color: #fff;
				background-color: #324157;
			}
			// color:#fff
		}
	</style>
	<style lang="less">
		.edit-mission {
			.el-dialog__body {
				position: relative;
			}
			.clearfloat {
				height: 300px;
				max-height: 350px;
			}
		}
	</style>
	<style scoped lang="less">
		.tree_list {
			// width: 220px;
			// float: left;
			// height: 100%;
			.panel_title {
				border-radius: 3px;
				background-color: #000;
				color: white;
			}
			>div {
				width: 100%;
				height: e("calc(100% - 20px)");
			}
		}

		.container {
			// width: e("calc(100% - 220px)");
			// float: left;
			// height: 100%;
			.panel_title {
				border-radius: 3px;
				background-color: #000;
				color: white;
			}
		}

		.el-tree-node__expand-icon.is-leaf {
			width: 10px;
			margin: 0;
		}
		.el-checkbox+.el-checkbox {
			margin-left: 0px;
		}
	</style>
	<style lang="less" scope>
		#img-diglog {
			text-align: center;
			.el-dialog {
				background: none;
				box-shadow: none;
			}
			.el-dialog__body {
				overflow: visible !important;
			}
		}
	</style>